import "./main.css";
import { Tabs } from "../tab/index";
import { Content } from "../contents/index";
import "components/loading/index.js";
import {
  setSData,
  getSData,
  removeSData,
  clearSData,
} from "../../../../utils/sessionStorage.js";

const tabsEl = document.getElementById("mainTabs");
const conEl = document.getElementById("content-layout");

const tabs = new Tabs(tabsEl);

const content = new Content(conEl);

tabs.to(0).then((data) => {
  content.fillContent(data);
});

const tabMenu = document.querySelector("#tabLauout");
tabMenu.addEventListener(
  "click",
  (e) => {
    // console.log(e.target.tagName);
    if (e.target.tagName === "LI") {
      let id = e.target.dataset.id - 1;
      const result = getSData(id);
      if (result) {
        tabs.setToActive(id);
        content.fillContent(result);
      } else {
        const tabPromise = tabs.to(id);
        content.fillLoading();
        tabPromise.then((data) => {
          setSData(id, data);
          content.fillContent(data);
        });
      }
    }
  },
  false
);
